<template>
  <div id="home">
    <Bgimg>Hello,friends</Bgimg>
    <Container>
      <ContainerLeft>
        <template v-slot:containerLeftTop>
          <Notice />
        </template>
        <template v-slot:containerLeftMain>
          <Article />
          <div class="getMore">
            <button>MoreArticle</button>
          </div>
        </template>
      </ContainerLeft>
    </Container>
  </div>
</template>

<script>
import Article from "views/Article.vue";
import Notice from "views/Notice.vue";
import Bgimg from "components/Bgimg.vue";
import Container from "components/container/Container.vue";
import ContainerLeft from "components/container/ContainerLeft.vue";
export default {
  name: "Home",
  components: {
    Container,
    Bgimg,
    Article,
    Notice,
    ContainerLeft,
  },
  mounted() {
   
  },
};
</script>

<style scoped>
#bgcBox {
  height: 100vh;
}
@media screen and (max-width: 768px) {
  #bgcBox {
    height: 338px;
    background-size: 100% 90vw;
    background-image: url(~assets/img/mhome.jpg);
  }
}
.getMore {
  display: block;
  text-align: center;
}
.getMore button {
  outline: none;
  padding: 10px 20px;
  border-radius: 22px;
  border: 2px solid #444;
  background: none;
  font-size: 16px;
  transition: all 0.5s;
}
.getMore button:hover {
  border: 2px solid #2abce9;
  color: #2abce9;
  cursor: pointer;
}
</style>
